
<template>
  <ScrollContainer :style="{ height: scrollerHeight + 'px' }" class="diy-p5" ref="wrapperRef">

    <div class="diy-setting-header">
      <Tooltip 
        class="diy-setting-header-left" v-if="designer?.selectedWidget" placement="bottomLeft"
        :title="t(`designer.widgetLabel.${designer.selectedWidget.type}`)"
      >
        {{ t(`designer.widgetLabel.${designer.selectedWidget.type}`) }}
      </Tooltip>
       
      <RadioGroup 
        class="diy-setting-header-right" 
        v-model:value="state.activeKey" button-style="solid"
      >
        <RadioButton value="comp">组件</RadioButton>
        <RadioButton value="form">表单</RadioButton>
      </RadioGroup>
    </div>
    <Divider style="margin: 10px 0px 5px 0px;"/>

    <div class="indent-left-margin">
      <!-- 根据类型分组, 有多少个分组, 头部就会展示多少个按钮 -->
      <template v-for="(propsTypeGroup, key) in propertyGroup(widgetPropsRegister, 'type')" :key="key">
        <template v-if="state.activeKey === 'comp' && !!designer?.selectedWidget && `${key}` === 'comp'">
          <Form v-bind:model="optionModel" class="diy-setting-form">
            <Collapse v-model:active-key="state.activeCollapseKey" ghost>
              <!-- 通过标签进行分组 -->
              <template v-for="(propsTagGroup, key, index) in propertyGroup(propsTypeGroup, 'tag')" :key="index">
                <!-- 按照标签分组展示属性 -->
                <template v-for="registeProps in propsTagGroup" :key="registeProps.tag">
                  <CollapsePanel 
                    :key="registeProps.tag"
                    :header="registeProps.tag" 
                    v-if="isShowPanel(registeProps)" class="diy-setting-collapse-panel"
                  >
                    <template v-for="(editorConfig, propName, index) in registeProps.props" :key="index">
                      <component v-if="hasPropEditor(propName, editorConfig.editor)" 
                        :is="getPropEditor(propName, editorConfig.editor)"
                        :designer="designer" :selected-widget="selectedWidget"
                        v-model:value="selectedWidget.props[propName]" 
                        :optionModel="optionModel"
                        :editorProps="editorConfig.editorProps || {}" :propName="propName"
                      />
                    </template>
                  </CollapsePanel>
                </template>
              </template>
            </Collapse>
          </Form>
        </template>

        <template v-if="state.activeKey === 'form' && `${key}` === 'form'">
          <FormSetting 
            :scrollerHeight="scrollerHeight"
            :designer="designer"
            :propsRegisted="propertyGroup(propsTypeGroup, 'tag')"
          />
        </template>
      </template>
    </div>
  </ScrollContainer>
</template>
<script lang="ts" name="diy-props-setting-panel" setup>
import { ref, getCurrentInstance, computed, onMounted, nextTick, watch, provide } from 'vue';
import type { CSSProperties } from 'vue';
import { useDrawer } from '/@/components/Drawer';
import widgetPropsRegister from './propertyRegister'
import { propertyRegistered, propertyGroup } from "./propertyRegister";
import type { Designer } from '../../type'
import { useI18n } from '/@/hooks/web/useI18n';
import { useGlobSetting } from '/@/hooks/setting';
import { ScrollContainer } from '/@/components/Container';
import { 
  Collapse, CollapsePanel, RadioGroup, RadioButton, Divider, Tooltip,
  Form
} from 'ant-design-vue';
import useSetting from './useSetting'
import FormSetting from './FormSetting.vue'
const { t } = useI18n('diyForm')
const state = ref({
  activeKey: 'comp',
  activeCollapseKey: '基础',
})

const props = defineProps({
  scrollerHeight: { type: Number },
  designer: { type: Object as () => Designer}
})
const selectedWidget = ref<any>()
const { isShowPanel, hasPropEditor, getPropEditor, updateFormItemConfig} = useSetting(selectedWidget, props)
// provide('designerConfig', props.designerConfig);

//@ts-ignore
const wrapperRef = ref()
const optionModel = ref<any>()

watch(
  () => props.designer?.selectedWidget,
  async (val: any) => {
    selectedWidget.value = val || {}
    optionModel.value = selectedWidget.value?.props || {}
    // optionModel.value = selectedWidget.value?.props
  },
  {
    deep: true,
    immediate: true
  }
);

onMounted(() => {
  updateFormItemConfig(props.designer)
})



</script>

<style lang="less">
@import '../index.less';

.diy-setting-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  &-left {
    font-size: 18px;
    color: @text-color;
    margin-right: auto;

    max-width: 150px;
    overflow: hidden;
    text-overflow:ellipsis; 
    white-space: nowrap;
  }
  &-right {
    
  }
}

.diy-setting-form {
  .ant-form-item-label label {
    font-size: 13px;
    //text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .ant-form-item {
    margin-bottom: 10px !important;
  }
}

.diy-setting-collapse-panel {
  .ant-collapse-header {
    margin-bottom: -10px !important;
  }

}
</style>
